<template>
  <div class="page-header-index-wide">

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs @change="callback" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-row :gutter="20" style="margin-bottom: 30px">
              <a-col :span="20">
                <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="startTime"></j-date>
                <span class="query-group-split-cust"></span>
                <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="endTime"></j-date>
              </a-col>
              <a-col :span="4" align="right">
                <a-button @click="getChartData" type="primary"><a-icon type="search" />查询</a-button>
              </a-col>
            </a-row>
          </div>
          <a-tab-pane loading="true" tab="工具箱" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <Radarchart title="工具箱使用信息柱状图分析" :dataSource="toolboxDataSource"></Radarchart>
                <!--<Piechart title="工具箱使用信息饼图分析" :dataSource="toolboxDataSource"></Piechart>-->
                <Areachart title="工具箱使用信息折线图分析" :params="chartParams" :dataSource="toolboxAreaDataSource"></Areachart>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <Rank title="用户作业次数排行榜" :list="userRankData"/>
                <Rank title="工种作业次数排行榜" :list="typeOfWorkRankData"/>
                <Rank title="工具箱使用次数排行榜" :list="toolboxRankData"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="工具" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <Radarchart title="工具报警信息柱状图分析" :dataSource="toolDataSource"></Radarchart>
                <!--<Piechart title="工具报警信息饼图分析" :dataSource="toolDataSource"></Piechart>-->
                <Areachart title="工具报警信息折线图分析" :params="chartParams" :dataSource="toolAreaDataSource"></Areachart>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <Rank title="用户作业次数排行榜" :list="userRankData"/>
                <Rank title="工种作业次数排行榜" :list="typeOfWorkRankData"/>
                <Rank title="工具报警次数排行榜" :list="toolRankData"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <!--<a-card style="margin-top: 20px">
      <div v-if="key=='1'">
        <a-row>
          <a-col>
            <Areachart title="工具箱使用信息折线图分析" :params="chartParams" :dataSource="toolboxAreaDataSource"></Areachart>
          </a-col>
        </a-row>
      </div>
      <div v-if="key=='2'">
        <a-row>
          <a-col>
            <Areachart title="工具报警信息折线图分析" :params="chartParams" :dataSource="toolAreaDataSource"></Areachart>
          </a-col>
        </a-row>
      </div>
    </a-card>-->
  </div>
</template>

<script>
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import Radarchart from '../modules/component/chart/Radarchart'
  import Areachart from '../modules/component/chart/Areachart'
  import Piechart from '../modules/component/chart/Piechart'
  import Rank from '../modules/component/chart/Rank'
  import { getAction } from '../../api/manage'
  export default {
    name: "IndexChart",
    components: {
      LineChartMultid,
      HeadInfo,
      Radarchart,
      Areachart,
      Piechart,
      Rank,
    },
    data() {
      return {
        loading: true,
        center: null,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        chartUrl:{
            "toolboxchart":"/useinfo/useInfo/toolboxchart",
            "toolboxareachart":"/useinfo/useInfo/toolboxareachart",
            "toolchart":"/warninginfo/warningInfo/toolchart",
            "toolareachart":"/warninginfo/warningInfo/toolareachart",
            "userchart":"/useinfo/useInfo/chart",
            "typeofworkchart":"/useinfo/useInfo/typeofworkchart",
        },
        startTime:'',
        endTime:'',
        toolboxDataSource:[],
        toolboxAreaDataSource:[],
        toolboxRankData:[],
        toolRankData:[],
        toolDataSource:[],
        toolAreaDataSource:[],
        chartParams:{},
        key:"1",
        typeOfWorkRankData:[],
        userRankData:[],
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.getToolboxChartData()
      this.getRankData()
    },
    methods: {
      getRankData(){
         let that = this
         let params1 = {
             startTime:this.startTime,
             endTime:this.endTime,
             selectUserNums:''
         }
          getAction(this.chartUrl.userchart,params1).then(res=>{
              //取前几个展示
              that.userRankData = res.result.splice(0,5)
          })
          let params2 = {
              startTime:this.startTime,
              endTime:this.endTime,
              selectWorkNames:''
          }
          getAction(this.chartUrl.typeofworkchart,params2).then(res=>{
              that.typeOfWorkRankData = res.result.splice(0,5)
          })
      },
      getToolboxChartData(){
          let that = this
          let params = {
              startTime:this.startTime,
              endTime:this.endTime,
              selectToolboxIds:''
          }
          that.chartParams = params
          getAction(this.chartUrl.toolboxchart,params).then(res=>{
              that.toolboxDataSource = res.result
              //工具箱使用次数排行榜，取前六个
              let length = 6
              if(that.toolboxDataSource.length<6){
                  length = that.toolboxDataSource.length
              }
              that.toolboxRankData = []
              for(let i=0;i<length;i++){
                  that.toolboxRankData.push(that.toolboxDataSource[i])
              }
          })
          getAction(this.chartUrl.toolboxareachart,params).then(res=>{
              that.toolboxAreaDataSource = res.result
          })
      },
      getToolChartData(){
          let that = this
          let params = {
             startTime:this.startTime,
             endTime:this.endTime,
             selectToolNums:''
          }
          that.chartParams = params
          getAction(this.chartUrl.toolchart,params).then(res=>{
             that.toolDataSource = res.result
              //工具报警次数排行榜，取前六个
              let length = 6
              if(that.toolDataSource.length<6){
                  length = that.toolDataSource.length
              }
             that.toolRankData = []
             for(let i=0;i<length;i++){
                 that.toolRankData.push(that.toolDataSource[i])
             }
          })
          getAction(this.chartUrl.toolareachart,params).then(res=>{
             that.toolAreaDataSource = res.result
          })
        },
      getChartData() {
        this.getRankData()
        if(this.key=="1"){
            this.getToolboxChartData()
        }
        if(this.key=="2"){
            this.getToolChartData()
        }
      },
      callback(key){
          this.key = key
          if(key=="1"){
              this.getToolboxChartData()
          }
          if(key==="2"){
              this.getToolChartData()
          }
      }
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>